<!DOCTYPE html>
<html>
<head>
   <title>CSS Animations - animation-duration value w/ two list entries</title>
   <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
   <link rel="help" href="http://dev.w3.org/csswg/css3-animations/#the-animation-duration-property-">
   <meta name="flags" content="dom">
   <meta name="assert" content="1000ms,.1s is a valid animation-duration value">
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
   <style type="text/css">
      @keyframes darken-left {
         from {
            border-left-color: blue;
         }
         to {
            border-left-color: black;
         }
      }
      @keyframes darken-right {
         from {
            border-right-color: blue;
         }
         to {
            border-right-color: black;
         }
      }
      div {
         width: 0px;
         height: 100px;
         border-left: 50px solid blue;
         border-right: 50px solid blue;
      }
      .test {
         animation-name: darken-right, darken-left;
         animation-fill-mode: forwards, forwards;
         animation-duration: 1000ms,.1s;
      }
   </style>
   <script type="text/javascript">
      setup({explicit_done:true});
      onload = function() {
         var testName = document.querySelector('title').firstChild.data;
         var div = document.querySelector('div');
         var log = document.querySelectorAll('p')[1].firstChild;
         var leftPassed = undefined;
         var rightPassed = undefined;
         function aboutEqual(observed, actual) {
            var maxFactor = 0.01;
            return (Math.abs(observed - actual) < maxFactor * actual);
         }
         var timeout = setTimeout(function() {
            test(function(){assert_true(false);}, testName); done();
            log.data = 'FAIL';
         }, 1500);
         div.addEventListener('animationend', function(evt) {
            if (evt.animationName == 'darken-left') {
               leftPassed = aboutEqual(evt.elapsedTime, 0.1);
            } else if (evt.animationName == 'darken-right') {
               rightPassed = aboutEqual(evt.elapsedTime, 1);
            }
            if (leftPassed !== undefined && rightPassed !== undefined) {
               clearTimeout(timeout);
               var passed = (leftPassed && rightPassed);
               test(function(){assert_true(passed);}, testName); done();
               log.data = (passed ? 'PASS if the animation occurred.' : 'FAIL');
            }
         });
         div.className = 'test';
      }
   </script>
   <style>iframe{display:none}</style>
</head>
<body>
   <p>The block below should gradually turn black, the left half quickly and
   the right half more slowly.</p>
   <p>Testing...</p>
   <div></div>
</body>
</html>
